<template>
  <div>
    <Panel title="集团大客户" useBack>
      <div slot="body">
        <el-form :inline="true" class="demo-form-inline" id="formData">
        <div class="box">
          <el-button  type="primary" @click="addIds()" style="margin-left:10px;margin-bottom:20px">加一行</el-button>
          
          <div class="block" v-for="(item, index) of formData.times" :key="index">
          <el-slider
            v-model="item.value"
            :format-tooltip="formatTooltip"
            range
            show-stops
            :step="1"
            :max="1439"
            :marks="marks">
          </el-slider>
          <el-button  type="primary"  @click="deleteIds(index)" style="margin-left:10px">-</el-button>
        </div>
        <el-button style="margin-left:40%" type="primary" @click="submit" >保存</el-button>
        </div>
         </el-form>
      </div>
    </Panel>
  </div>
  
</template>

<script>
import Panel from "@/components/Panel";
import request from "@/tools/request";
  export default {
    components: {
      Panel,
    },
    data() {
      return {
        value: [30, 60],
        marks: {
        0: "00:00",
        180: {
          label: "03:00",
        },
        360: {
          label: "06:00",
        },
        540: {
          label: "09:00",
        },
        720: {
          label: "12:00",
        },
        900: {
          label: "15:00",
        },
        1080: {
          label: "18:00",
        },
        1260: {
          label: "21:00",
        },
        1439: {
          style: {
            width: "36px",
          },
          label: "23:59"
        }
      },
      formData: {
        times: [
          {value: [30, 60]}
        ],
      },
      }
    },
    created(){
      this.getRate()
    },
    methods: {
        formatTooltip(val) {
        let hour = 0;
        let min = 0;
        hour = parseInt(val / 60);
        if (hour < 10) {
          hour = "0" + hour.toString();
        } else {
          hour = hour.toString();
        }
        min = val - hour * 60;
        if (min < 10) {
          min = "0" + min.toString();
        } else {
          min = min.toString();
        }
        let time = hour + ":" + min;
        return time;
      },
      addIds(){
        this.formData.times.push({})
      },
      deleteIds(index) {
          this.formData.times.splice(index, 1)
      },
      async submit() {
         let this_ = this
          let data = this.formData.times
          if (!data) return this.$message.error('至少包含一条数据')
          let arr = []
          let start ,end
          let isWan = true
          data.map((item, index) => {
            // if(!item.value[0] || !item.value[1]){
            //   isWan = false
            // } 
            start = this_.formatTooltip(item.value[0])
            end = this_.formatTooltip(item.value[1])
            arr.push({'beginTime': start+':00', 'endTime': end+':59'})
            return item
          })
          // if(!isWan){
          //   return this.$message.error('请完善时间段')
          // }
          function compare(property,desc) {
                return function (a, b) {
                    var value1 = a[property];
                    var value2 = b[property];
                    if(desc==true){
                        // 升序排列
                        return value1 - value2;
                    }else{
                        // 降序排列
                        return value2 - value1;
                    }
                }
            }
          arr.sort(compare('beginTime',true))
          // if(ret == false) return this.$message.error(msg)
          // return
          let res = await request({
          url: '/group/use/time/update',
          method: 'POST',
          data: {id:this.$route.query.id, list:arr}
          })
          if (res.code !==0) return
          this.$message.success('提交成功')
          this.$router.go(-1)


    },
      async getRate() {
      const { list } = await request({
        url: "/group/use/time/list",
        method: "POST",
        data: this.$route.query.id,

      });
      let arr = []
      list.map( item => {
        var begin = item.beginTime.split(":")
        var num1 = 60 * parseInt(begin[0]) + parseInt(begin[1])
        var end = item.endTime.split(":")
        var num2 = 60 * parseInt(end[0]) + parseInt(end[1])
        arr.push({value: [num1, num2]})
        return  item
      })

      this.formData.times = arr
    },
    }
  }
</script>
<style  scoped>
.block {
  /* display: flex; */
  /* align-items: center; */
  padding: 27px 10px;
  width: 660px;
  display: flex;
  justify-content: space-around;
}
.block div {
  width: 568px;
}
.box {
  background: #f3f3f3;
  padding: 20px;
}
</style>